<html>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/css/layui.css" media="all">
<link href="/css/font-awesome.css?v=4.4.0"
      th:href="@{/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
<link rel="stylesheet" href="/css/layuiadmin/style/admin.css" media="all">
<body class="vsc-initialized" layadmin-themealias="default">

<div class="layui-fluid" id="app">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          物资数量
          <span class="layui-badge layui-bg-blue layuiadmin-badge">个</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font">{{ material.sum }}</p>
          <p>
            物资种数
            <span class="layuiadmin-span-color">{{ material.kindNumber }}<i class="fa fa-list-alt"
                                                                            aria-hidden="true"></i></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          财务合计
          <span class="layui-badge layui-bg-cyan layuiadmin-badge">元</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font">{{ bill.sum }}</p>
          <p>
            最新动账
            <span class="layuiadmin-span-color">{{ bill.budget }}<i class="fa fa-jpy" aria-hidden="true"></i></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          未读通知
          <span class="layui-badge layui-bg-green layuiadmin-badge">条</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">

          <p class="layuiadmin-big-font">{{ selfNotify.unread }}</p>
          <p>
            全部通知
            <span class="layuiadmin-span-color">{{ selfNotify.sum }}<i class="fa fa-paper-plane-o"
                                                                       aria-hidden="true"></i></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          总用户量
          <span class="layui-badge layui-bg-orange layuiadmin-badge">人</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">

          <p class="layuiadmin-big-font">{{ sysUser.sum }}</p>
          <p>
            在线用户数
            <span class="layuiadmin-span-color">{{ sysUser.online }}<i class="fa fa-smile-o"
                                                                       aria-hidden="true"></i></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm4">
      <div class="layui-card">
        <div class="layui-card-header">用户留言</div>
        <div class="layui-card-body">
          功能暂未开放
          <!--<ul class="layuiadmin-card-status layuiadmin-home2-usernote">-->
          <!--<li>-->
          <!--    <h3>贤心</h3>-->
          <!--    <p>作为 layui 官方推出的后台模板，从初版的饱受争议，到后续的埋头丰富，逐步占据了国内后台系统应用的主要市场。</p>-->
          <!--    <span>5月30日 00:00</span>-->
          <!--    <a href="javascript:;" layadmin-event="replyNote" data-id="7" class="layui-btn layui-btn-xs layuiadmin-reply">回复</a>-->
          <!--</li>-->
          <!--<li>-->
          <!--    <h3>胡歌</h3>-->
          <!--    <p>你以为只要长得漂亮就有男生喜欢？你以为只要有了钱漂亮妹子就自己贴上来了？你以为学霸就能找到好工作？我告诉你吧，这些都是真的！</p>-->
          <!--    <span>5月11日 00:00</span>-->
          <!--    <a href="javascript:;" layadmin-event="replyNote" data-id="6" class="layui-btn layui-btn-xs layuiadmin-reply">回复</a>-->
          <!--</li>-->
          <!--</ul>-->
        </div>
      </div>
    </div>
    <div class="layui-col-sm8">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">通知列表</div>
            <div class="layui-card-body">
              功能暂未开放
              <!--    <table class="layui-table layuiadmin-page-table" lay-skin="line">-->
              <!--        <thead>-->
              <!--        <tr>-->
              <!--            <th>用户名</th>-->
              <!--            <th>最后登录时间</th>-->
              <!--            <th>状态</th>-->
              <!--            <th>获得赞</th>-->
              <!--        </tr>-->
              <!--        </thead>-->
              <!--        <tbody>-->
              <!--        <tr>-->
              <!--            <td><span class="first">胡歌</span></td>-->
              <!--            <td><i class="layui-icon layui-icon-log"> 11:20</i></td>-->
              <!--            <td><span>在线</span></td>-->
              <!--            <td>22 <i class="layui-icon layui-icon-praise"></i></td>-->
              <!--        </tr>-->
              <!--        <tr>-->
              <!--            <td><span class="second">彭于晏</span></td>-->
              <!--            <td><i class="layui-icon layui-icon-log"> 10:40</i></td>-->
              <!--            <td><span>在线</span></td>-->
              <!--            <td>21 <i class="layui-icon layui-icon-praise"></i></td>-->
              <!--        </tr>-->
              <!--        </tbody>-->
              <!--    </table>-->
            </div>
          </div>
        </div>
        <div class="layui-col-sm6">
          <div class="layui-card">
            <div class="layui-card-header">任务列表</div>
            <div class="layui-card-body">
              功能暂未开放
              <!--<div class="layui-tab-content">-->
              <!--    <div class="layui-tab-item layui-show">-->
              <!--        <table id="LAY-index-prograss"></table>-->
              <!--        <div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1" lay-id="LAY-index-prograss" style=" ">-->
              <!--            <div class="layui-table-box"><div class="layui-table-header">-->
              <!--                <table class="layui-table" lay-skin="line" cellspacing="0" cellpadding="0" border="0">-->
              <!--                    <thead>-->
              <!--                    <tr>-->
              <!--                        <th data-field="0" data-key="1-0-0" data-unresize="true" class=" layui-table-col-special">-->
              <!--                            <div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox">-->
              <!--                                <input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose">-->
              <!--                                <div class="layui-unselect layui-form-checkbox" lay-skin="primary">-->
              <!--                                    <i class="layui-icon layui-icon-ok"></i>-->
              <!--                                </div>-->
              <!--                            </div>-->
              <!--                        </th>-->
              <!--                        <th data-field="prograss" data-key="1-0-1" class="">-->
              <!--                            <div class="layui-table-cell laytable-cell-1-0-1">-->
              <!--                                <span>任务</span>-->
              <!--                            </div>-->
              <!--                        </th>-->
              <!--                        <th data-field="time" data-key="1-0-2" class="">-->
              <!--                            <div class="layui-table-cell laytable-cell-1-0-2">-->
              <!--                                <span>所需时间</span>-->
              <!--                            </div>-->
              <!--                        </th>-->
              <!--                        <th data-field="complete" data-key="1-0-3" class="">-->
              <!--                            <div class="layui-table-cell laytable-cell-1-0-3">-->
              <!--                                <span>完成情况</span>-->
              <!--                            </div>-->
              <!--                        </th>-->
              <!--                    </tr>-->
              <!--                    </thead>-->
              <!--                </table>-->
              <!--            </div>-->
              <!--                <div class="layui-table-body layui-table-main">-->
              <!--                    <table class="layui-table" lay-skin="line" cellspacing="0" cellpadding="0" border="0">-->
              <!--                        <tbody>-->
              <!--                        <tr data-index="0">-->
              <!--                            <td data-field="0" data-key="1-0-0" class="layui-table-col-special">-->
              <!--                                <div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox">-->
              <!--                                    <input type="checkbox" name="layTableCheckbox" lay-skin="primary" checked="">-->
              <!--                                    <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">-->
              <!--                                        <i class="layui-icon layui-icon-ok"></i>-->
              <!--                                    </div>-->
              <!--                                </div>-->
              <!--                            </td>-->
              <!--                            <td data-field="prograss" data-key="1-0-1" class="">-->
              <!--                                <div class="layui-table-cell laytable-cell-1-0-1">开会</div>-->
              <!--                            </td><td data-field="time" data-key="1-0-2" class="">-->
              <!--                            <div class="layui-table-cell laytable-cell-1-0-2">一小时</div>-->
              <!--                        </td>-->
              <!--                            <td data-field="complete" data-key="1-0-3" data-content="已完成" class="">-->
              <!--                                <div class="layui-table-cell laytable-cell-1-0-3">-->
              <!--                                    <del style="color: #5FB878;">已完成</del>-->
              <!--                                </div></td></tr><tr data-index="1">-->
              <!--                            <td data-field="0" data-key="1-0-0" class="layui-table-col-special">-->
              <!--                                <div class="layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox">-->
              <!--                                    <input type="checkbox" name="layTableCheckbox" lay-skin="primary" checked="">-->
              <!--                                    <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">-->
              <!--                                        <i class="layui-icon layui-icon-ok"></i>-->
              <!--                                    </div>-->
              <!--                                </div>-->
              <!--                            </td>-->
              <!--                            <td data-field="prograss" data-key="1-0-1" class="">-->
              <!--                                <div class="layui-table-cell laytable-cell-1-0-1">项目开发</div>-->
              <!--                            </td><td data-field="time" data-key="1-0-2" class="">-->
              <!--                            <div class="layui-table-cell laytable-cell-1-0-2">两小时</div>-->
              <!--                        </td>-->
              <!--                            <td data-field="complete" data-key="1-0-3" data-content="进行中" class="">-->
              <!--                                <div class="layui-table-cell laytable-cell-1-0-3">-->
              <!--                                    <span style="color: #FFB800;">进行中</span>-->
              <!--                                </div>-->
              <!--                            </td>-->
              <!--                        </tr>-->
              <!--                        </tbody>-->
              <!--                    </table>-->
              <!--                </div>-->
              <!--            </div>-->
              <!--        </div>-->
              <!--    </div>-->
              <!--</div>-->
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  <div class="layui-row layui-card">
    <div class="layui-card-header">常见问题</div>
    <div class="layui-col-sm12 layui-collapse" lay-accordion>
      <div class="layui-colla-item">
        <h2 class="layui-colla-title">忘记密码怎么办？</h2>
        <div class="layui-colla-content">由于系统采用MD5加密的方式储存用户密码，用户忘记密码后，无法找回原密码。可以联系社长或者系统管理员进行密码重置。</div>
      </div>
      <div class="layui-colla-item">
        <h2 class="layui-colla-title">如何登记财务？</h2>
        <div class="layui-colla-content">财务管理员可直接在账单管理页面中添加账单，系统会自动填充登记人、登记时间，且任何人都可以查看账单。
          非财务管理员需在财务管理菜单中的申请报销页面填写账单信息，然后点确认后等待账单管理员审批。账单申请后，无法删除，但可以撤销申请。
          财务管理后同意后，会自动将账单添加到账单管理页，如拒绝后，再申请人用户的页面中，账单的状态会修改为“已拒绝”
        </div>
      </div>
      <div class="layui-colla-item">
        <h2 class="layui-colla-title">修改头像无效怎么办？</h2>
        <div class="layui-colla-content">由于系统修改头像后没有实时刷新信息，需要用户注销，再重新登录，即可看到最新更换的头像。</div>
      </div>
      <div class="layui-colla-item">
        <h2 class="layui-colla-title">如何修改姓名？</h2>
        <div class="layui-colla-content">由于修改姓名会对历史数据产生干扰，所以本系统再管理员创建用户后，便无法修改姓名。</div>
      </div>
    </div>
  </div>
</div>

<style>
  .layui-colla-title {
    background-color: #ffffff;
  }

  .layui-colla-content {
    background-color: #ffffff;
  }
</style>

<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/layuiadmin/layui/layui.js"></script>
<script src="/js/layui.js"></script>
<script src="/js/vue.min.js"></script>

<script>
  layui.use('element', function () {
    var element = layui.element;
  });

  var app = new Vue({
    el: '#app',
    data: {
      material: {
        sum: 0,
        kindNumber: 0
      },
      bill: {
        sum: 0,
        budget: 0
      },
      selfNotify: {
        sum: 0,
        unread: 0
      },
      sysUser: {
        sum: 0,
        online: 0
      },
      rows: '',
    },
    methods: {
      getData: function () {
        // $.getJSON("/list", {
        //     kindId: kindId,
        //     limit: this.limit,
        //     offset: this.offset,
        //     type: this.type
        // }, function (r) {
        //     app.total = r.total;
        //     app.rows = r.rows;
        //     app.page();
        // });
      },
      getMaterial: function () {
        $.getJSON("/cms/material/listMaterial",
          function (r) {
            app.material.sum = 0;
            app.material.kindNumber = r.length
            for (let i = 0; i < r.length; i++) {
              app.material.sum += r[i].number
            }
          });
      },
      getBill: function () {
        $.getJSON("/cms/bill/listBill",
          function (r) {
            app.bill.budget = r[r.length - 1].budget
            app.bill.sum = 0;
            for (let i = 0; i < r.length; i++) {
              app.bill.sum += r[i].budget
            }
          });
      },
      getSelfNotify: function () {
        $.getJSON("/oa/notify/selfNotifyList",
          function (r) {
            app.selfNotify.sum = r.length
            app.selfNotify.unread = 0;
            for (let i = 0; i < r.length; i++) {
              if (r[i].isRead == '0') {
                app.selfNotify.unread++
              }
            }
          })
      },
      getUser: function () {
        $.getJSON("/sys/user/countUser",
          function (r) {
            app.sysUser.sum = r
          })
        $.getJSON("/sys/online/list",
          function (r) {
            app.sysUser.online = r.length
          })
      }
    },
    created: function () {

      this.getBill()
      this.getMaterial()
      this.getSelfNotify()
      this.getUser()
      // this.changeType('')
    }
  });
</script>
</body>
